<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>WebSocket</title>
    <link rel="stylesheet" href="${baseUrlStatic}/common/style/bootstrap.min.css"/>
</head>
<body>
<div>
    <table>
        <tr>
            <th>接收者</th>
            <td>
                <select id="user">
                    <option value="0">全部</option>
                </select>
            </td>
        </tr>
        <tr>
            <th>消息</th>
            <td>
                <input type="text" id="text"/>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" id="socket-switch" value="Off"/>
                <input type="button" id="send" value="Send"/>
            </td>
        </tr>
    </table>
    <ul id="message">

    </ul>
</div>
<script type="text/javascript" src="${baseUrlStatic}/common/script/jquery-1.8.2.js"></script>
<script type="text/javascript" src="${baseUrlStatic}/common/script/bootstrap.min.js"></script>
<script type="text/javascript" src="${baseUrlStatic}/common/script/yehun-socket.js"></script>
<script type="text/javascript">
    console.log(window.location.href);
    console.log(window.location.protocol);
    console.log(window.location.host);
    console.log(window.location.port);
    console.log(window.location.pathname);
    console.log(window.location.search);
    console.log(window.location.hash);
    var updateMessage = function (message) {
        var liNode = document.createElement("li");
        liNode.innerText = message;
        document.getElementById("message").appendChild(liNode);
    };
    var updateUser = function (users) {
        if (users === null || users.length <= 0) {
            return false;
        }
        var userList = []; //全部连接用户
        var userSelect = document.getElementById("user");
        var childs = userSelect.getElementsByTagName("option");
        for (var i = 0; i < childs.length; i++) {
            console.log(childs[i].value);
            userList.push(childs[i].value);
        }
        for (i = 0; i <= users.length; i++) {
            if (users[i] === undefined || users[i] === "") continue;
            if (userList.indexOf(users[i]) > -1) continue;
            var optionNode = document.createElement("option");
            optionNode.value = users[i];
            optionNode.innerText = users[i];
            userSelect.appendChild(optionNode);
        }
    };

    var cleanUser = function () {
        updateMessage("连接关闭");
        var userSelect = document.getElementById("user");
        var childs = userSelect.getElementsByTagName("option");
        for (var i = 0; i < childs.length; i++) {
            if (childs[i].value === "0") continue;
            userSelect.remove(childs[i]);
        }
    };

    var webSocket = null;
    var sendButtonEvent = function () {
        var textInput = document.getElementById("text");
        if (textInput.value === undefined || textInput.value === "") {
            alert("请输入发送内容");
            return false;
        }
        var jsonObjcet = {};
        jsonObjcet.message = textInput.value;
        var userSelect = document.getElementById("user");
        if (userSelect.value !== undefined && userSelect.value !== "" && userSelect.value !== "0") {
            jsonObjcet.userId = userSelect.value;
        }
        var jsonString = JSON.stringify(jsonObjcet);
        console.log("jsonString=" + jsonString);
        webSocket.send(jsonString);
        textInput.value = "";
    };
    var closeWebSocket = function () {
        if (webSocket !== null) {
            webSocket.close();
            webSocket = null;
        }
    };
    document.getElementById("send").addEventListener("click", sendButtonEvent);
    document.getElementById("socket-switch").addEventListener("click", function () {
        var url = "ws://" + window.location.host + "${baseUrlRoot}/spring-websocket";
        if (this.value === "Off") {
            this.value = "On";
            webSocket = new YehunSocket({
                url: url,
                onOpen: function (e) { updateMessage("连接成功"); },
                onClose: function (e) { cleanUser(); },
                onMessage: function (e) {
                    var data = e.data;
                    try {
                        var jsonObject = JSON.parse(data);
                        switch (jsonObject.type) {
                            case 0:
                                updateMessage(jsonObject.data);
                                break;
                            case 1:
                                updateUser(jsonObject.data);
                                break;
                        }
                    } catch (ex) { }
                }
            });
        } else {
            this.value = "Off";
            closeWebSocket();
        }
    });

    document.getElementById("socket-switch").click();

    document.onkeydown = function (event) {
        if (event.keyCode === 13) {
            document.getElementById("send").click();
        }
    };



    window.onbeforeunload = function (e) {
        closeWebSocket();
    };
    window.onunload = function() {
        closeWebSocket();
    };
</script>
</body>
</html>